<template>
	<view class="container">
		<view class="form-box">
			<view class="form">
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">收货人</view>
						<input class="input" placeholder="请输入收货人" v-model="form.consignee" placeholder-class="text-color-assist" />
					</view>
				</list-cell>
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">联系方式</view>
						<input class="input" placeholder="请输入收货人联系方式" v-model="form.mobile" placeholder-class="text-color-assist" />
					</view>
				</list-cell>
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">收货地址</view>
						<input @tap="chooseAddress" disabled class="input" placeholder="请选择收货地址" v-model="street" placeholder-class="text-color-assist" />
					</view>
				</list-cell>
				<list-cell :hover="false">
					<view class="form-input">
						<view class="label">门牌号</view>
						<input class="input" placeholder="请输入收货人详细地址" v-model="form.address" placeholder-class="text-color-assist" />
					</view>
				</list-cell>
				<!-- 是否设为默认地址 -->
				<list-cell :hover="false">
					<view class="form-input setDefaultAddress">
						<view class="label">是否为默认地址</view>
						<switch :checked="form.isDefault" color="#FB586A"  @change="setDefaultAddress"/>
					</view>
				</list-cell>
			</view>
			<view class="btn-section"><button type="primary" size="default" @tap="save">保存</button></view>
		</view>
		<tui-bottom-popup :show="show" backgroundColor="transparent" @close="close">
			<tui-cascade-selection request :size="26" :textSize="24" :itemList="itemList" :reset="reset" :receiveData="receiveData" @change="switchAddressDetail" @complete="complete3" />
		</tui-bottom-popup>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import listCell from '@/components/list-cell/list-cell';
import tuiCascadeSelection from '@/components/tui-cascade-selection/tui-cascade-selection.vue';
import tuiBottomPopup from '@/components/tui-bottom-popup/tui-bottom-popup.vue';
const QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
export default {
	components: {
		listCell,
		 tuiCascadeSelection,
		  tuiBottomPopup
		  },
	data() {
		return {
			form: {
				id:'',
				consignee: '',
				mobile: '',
				province: '350000',
				city: '350600',
				area: '',
				provinceName:'福建省',
				cityName:'漳州市',
				areaName:'',
				communityId: '',
				address: '',
				isDefault:0
			},
			street: '福建省漳州市',
			itemList: [],
			show: false,
			reset: 0,
			receiveData: [],
			qqmapsdk: null
		};
	},
	computed: {
		...mapGetters(['addresses'])
	},
	async onLoad({ id }) {
		await this.userInfo().then(res=>{
			console.log('res',res)
			if(res.code == 0){
				if(res.data.mobile){
					this.form.mobile = res.data.mobile;
				}
			}
		}).catch(err=>{
			console.log('err',err);
			uni.showToast({
				title:err.msg,
				icon:'none',
				duration:1500
			})
		})
		if (id) {
			uni.showLoading({ mask: true });
			this.addressDetail({ id }).then(res => {
				const result = res.data || {};
				this.form.id = result.id;
				this.form.consignee = result.consignee;
				if(result.mobile){
					this.form.mobile = result.mobile;
				}
				this.form.province = result.province;
				this.form.city = result.city;
				this.form.area = result.area;
				this.form.provinceName = result.provinceName;
				this.form.cityName = result.cityName;
				this.form.areaName = result.areaName;		
				this.form.communityId = result.communityId;
				this.form.address = result.address;
				this.form.isDefault = result.isDefault;
				this.street = `${result.provinceName ? result.provinceName : ''}${result.cityName ? result.cityName : ''}${result.areaName ? result.areaName : ''}${
					result.communityName ? result.communityName : ''
				}`;
				uni.hideLoading();
			});
		}
	},
	methods: {
		...mapActions(['getAllProvince', 'getAllCity', 'getAllArea', 'communityList', 'addressSave', 'addressDetail','userInfo']),
		setDefaultAddress(event){
			let checked = event.detail.value;
			console.log('checked',checked)
			if (checked) {
				this.form.isDefault=1;					
			} else {
				this.form.isDefault=0;
			}
		},
		async save() {
			if (!this.form.consignee) {
				uni.showToast({ title: '姓名不能为空', icon: 'none' });
				return false;
			}
			if (!this.form.mobile) {
				uni.showToast({ title: '联系方式不能为空', icon: 'none' });
				return false;
			}
			if (this.street == "") {
				uni.showToast({ title: '收货地址不能为空', icon: 'none' });
				return false;
			}
			if (!this.form.address) {
				uni.showToast({ title: '详细地址不能为空', icon: 'none' });
				return false;
			}
			
			this.addressSave(this.form).then(res => {
				if(res.code == 0){
					uni.showToast({
						title:"保存成功",
						icon:'success',
						mask:true,
						duration:1500,
						complete:()=>{
							setTimeout(function(){
								uni.$emit('refresh-address');
								uni.navigateBack(); 
							},1500)
						}
					}) 
				}else{
					uni.showToast({
						title:res.msg,
						mask:true,
						duration:1500
					})
				}
				
			});
		},
		close() {
			this.show = false;
		},
		complete3(e) {
			this.street = e.text;
			this.close();
			setTimeout(() => {
				//重置数据
				this.reset++;
			}, 300);
		},
		chooseAddress() {
			this.getAllProvince().then(res => {
				this.itemList = res.data.map(c => {
					c.text = c.province;
					return c;
				});
				this.show = true;
				console.log('itemList',this.itemList)
			});
		},
		switchAddressDetail(event) {
			let position = event.position;
			console.log('event',event);		
			if (event.level == 1) {
				this.form.province = event.id;
				this.form.provinceName = event.province;
				uni.showLoading({ mask: true });
				this.getAllCity(event.id).then(res => {
					uni.hideLoading();
					this.receiveData = res.data.map(c => {
						c.text = c.city;
						return c;
					});
				});
			} else if (event.level == 2) {
				this.form.city = event.id;
				this.form.cityName = event.city;
				uni.showLoading({ mask: true });
				this.getAllArea(event.id).then(res => {
					uni.hideLoading();
					this.receiveData = res.data.map(c => {
						c.text = c.area;
						return c;
					});
				});
			} else if (event.level == 3) {
				this.form.area = event.id;
				this.form.areaName = event.area;
				uni.showLoading({ mask: true });
				let [province, city, area] = position.split(',');
				this.communityList({ province, city, area }).then(res => {
					uni.hideLoading();
					this.receiveData = res.data.map(c => {
						c.text = c.name;
						return c;
					});
				});
				
			} else {
				this.form.communityId = event.id;
				this.receiveData = [];
			}
			console.log(this.form)
		}
	}
};
</script>

<style lang="scss" scoped>
.form-box {
	width: 100%;
	height: 100%;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	color: $text-color-base;

	.form-input {
		display: flex;
		align-items: center;
		width: 100%;
	}
	
	.setDefaultAddress{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		switch{
			transform:scale(0.7);
		}
	}

	.label {
		width: 220rpx;
		font-size: $font-size-lg;
		color: $text-color-base;
		font-weight: 500;
	}

	.input {
		flex: 1;
		// display: flex;
		// align-items: center;
	}

	.radio-group {
		display: flex;
		justify-content: flex-start;

		.radio {
			padding: 10rpx 30rpx;
			border-radius: 6rpx;
			border: 2rpx solid $text-color-assist;
			color: $text-color-assist;
			font-size: $font-size-base;

			&.checked {
				background-color: $color-primary;
				color: $text-color-white;
				border: 2rpx solid $color-primary;
			}
		}
	}

	.btn-section {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 70rpx;
		button {
			font-size: $font-size-base;
			height: 90rpx;
			border-radius: 50rem !important;
			width: 85%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
